import { t } from 'i18next'
import React, { useEffect } from 'react'
import { HelperTop } from '../../components/HelperTop'
import { IChangeTab, ITab } from '../../interface'
import { ICheckingItem } from '@/api/manager/helper/interface'
import { Wrap, IconAvatar, IconInfo } from './style'
import { useMccStore } from '@/pages/manager/store'
import { fetchCheckingOpenMtInfo } from '@/api/manager/mccMtInfo'
import { MtProp } from '../../../mccMtInfo/interface'
import { useVmpStore } from '../../../vmp/store'
import { useMtVmpStore } from '../../../mtVmp/store'
import { useMccMtInfoStore } from '../../../mccMtInfo/store'
import { useMsgStore } from '../../store'
import shallow from 'zustand/shallow'
import { useData } from './hooks'

interface ICheckingProps {
	checkingService: ReturnType<typeof useData>
}

export const Checking = ({ checkingService }: ICheckingProps) => {
	const { meetingMoid, isExitChecking } = useMccStore(
		(state) => ({
			isExitChecking: state.enableJdb === 1,
			meetingMoid: state.mccInfo.meetingMoid,
		}),
		shallow
	)

	const update = useMsgStore((state) => state.update)

	useEffect(() => {
		if (isExitChecking) checkingService.run(meetingMoid)
	}, [isExitChecking])

	const handleClickTopTab = (tab: ITab) => {
		update({ tab: undefined })
		setTimeout(() => {
			update({ tab: tab })
		})
	}
	const handleOpenInfo = (item: ICheckingItem) => {
		let para = {
			e164: item.mt_e164,
			meeting_moid: useMccStore.getState().mccInfo.meetingMoid,
		}
		fetchCheckingOpenMtInfo(para).then((res) => {
			if (res) {
				let _mt: MtProp = {
					isMt: true,
					mtKey: res.mt_key,
					mtid: res.mt_id, //需要这边来判断是不是智能级联离线下级终端
					confLevel: res.conf_level,
					e164: res.e164,
					interactiveMt: 1,
				}
				if (useVmpStore.getState().isOpen) {
					useVmpStore.setState({ isOpen: false })
					useVmpStore.getState().onClose()
				}
				if (useMtVmpStore.getState().isOpen) {
					useMtVmpStore.setState({ isOpen: false })
					useMtVmpStore.getState().onClose()
				}
				//初始化终端信息页面
				useMccMtInfoStore.getState().setMt(_mt)
				useMccStore.getState().setCurPage('mt_info')
			}
		})
	}
	const text = () => {
		let w = ''
		if (isExitChecking) {
			if (checkingService.loading) {
				w = t('正在检测终端，请稍后...')
			} else {
				if (checkingService.errorText) {
					w = checkingService.errorText
				} else {
					if (checkingService.list.length === 0) {
						w = t('终端检测已完成，终端音视频正常')
					} else {
						w = t('终端检测已完成，当前有{{num}}条终端异常信息', { num: checkingService.list.length })
					}
				}
			}
		} else {
			w = t('目前没有会议大数据服务器，无法为您检测终端。')
		}
		return w
	}
	return (
		<Wrap>
			<HelperTop onClickTopTab={handleClickTopTab}>{text()}</HelperTop>
			{isExitChecking && !checkingService.loading && !checkingService.errorText && (
				<ul>
					{checkingService.list.map((x, i) => (
						<li key={i}>
							<div className="checking-name">
								<IconAvatar />
								<div>{x.mt_name}</div>
								<IconInfo onClick={() => handleOpenInfo(x)} />
							</div>
							<div className="checking-desc">{t('发生时间：{{time}}', { time: x.event_time })}</div>
							<div className="checking-desc" title={x.description}>
								{t('异常问题')}：{x.description}
							</div>
							<div className="checking-desc" title={x.suggestion}>
								{t('解决方案')}：{x.suggestion}
							</div>
						</li>
					))}
				</ul>
			)}
		</Wrap>
	)
}
